/* @flow */

import React, { Component } from 'react';
import {
  View,
  Text,
  StyleSheet,
  Button,
  Image,
  FlatList,
  ScrollView,
  Dimensions,
} from 'react-native';

import LeftListView from './LeftListView'
import ContentTableList from './ContentTableList'
var {height, width} = Dimensions.get('window');
var bottom_space = 10;//默认底部富裕空间
var numOfLine = 15;//默认行数

//备用数据
var leftTitles = ['医院','医院编码','订单数','订单设备数','成功订单数','关注订单数','新增用户数','PORTAL_PV','微信PV','微信UV','吸粉数','PV/UV','微信拉起率','吸粉率','页面打开率']

var keys = ["hospitalName","hospitalCode","orderFormNum", "orderFormDevNum", "oderFormSuccNum","oderFormFocusedNum","newAddUserNum", "portalPV", "wePV", "weUV","fetchFansNum", "PVUVDevide", "weUpRate",  "fetchFansRate", "pageOpenRate"]

//开始
export default class MultiseriateTable extends Component {

  //默认属性
  static defaultProps = {
    textStyle:{fontSize:12,color:'rgb(39, 46, 47)',backgroundColor:'rgba(250, 250, 250, 0)'},
    itemStyle:{borderColor:'rgb(18, 18, 16)',borderWidth:1,width:110,height:30},
    leftItemStyle:{width:80 },
    tableType:'day',// month day
  }

  //构造器
  constructor(props){
  	super(props);
  	this.state = {
      contantData:[]
    };
  }
  //将要挂载
  componentWillMount() {

    if (this.props.tableType == 'day') {
      leftTitles = ['医院','医院编码','订单数','订单设备数','成功订单数','关注订单数','新增用户数','PORTAL_PV','微信PV','微信UV','吸粉数','PV/UV','微信拉起率','吸粉率','页面打开率']

      keys = ["hospitalName","hospitalCode","orderFormNum", "orderFormDevNum", "oderFormSuccNum","oderFormFocusedNum","newAddUserNum", "portalPV", "wePV", "weUV","fetchFansNum", "PVUVDevide", "weUpRate",  "fetchFansRate", "pageOpenRate"]

      var contantData = this.props.data?this.props.data : require('./dayTable.json').dateList
      this.setState({contantData:contantData})

    }else if (this.props.tableType == 'month') {
      leftTitles = ['日期','订单数','订单设备数','成功订单数','关注订单数','新增用户数','PORTAL_PV','微信PV','微信UV','吸粉数','PV/UV','微信拉起率','吸粉率','页面打开率']

      keys = ["date","orderFormNum", "orderFormDevNum", "oderFormSuccNum","oderFormFocusedNum","newAddUserNum", "portalPV", "wePV", "weUV","fetchFansNum", "PVUVDevide", "weUpRate",  "fetchFansRate", "pageOpenRate"]

      var contantData = this.props.data?this.props.data :require('./MonthTable.json').dateList
      this.setState({contantData:contantData})

    }else {
      var contantData = this.props.data?this.props.data : require('./dayTable.json').dateList
      this.setState({contantData:contantData})
    }


  }

  //渲染
  render() {
    return (
      <View style={[{backgroundColor:'white',justifyContent: 'center', alignItems: 'center'},this.props.style]}>

        {/* <ScrollView
          ref='vertical'
          showsHorizontalScrollIndicator={false}
          showsVerticalScrollIndicator={false}>
          <ScrollView
            ref='vertical'
            horizontal={true}
            showsHorizontalScrollIndicator={false}
        showsVerticalScrollIndicator={false} > */}
        <View style={[ styles.sContainer, {width:(this.props.data.length<=2)?(this.props.data.length*this.props.itemStyle.width+this.props.leftItemStyle.width): this.props.style.width,height:this.props.style.heigh,backgroundColor:'white'}]}>

          {/* 左侧标题栏目 */}
          {this._renderLeftListView(leftTitles)}

          {/* 右侧内容 */}
          {this._renderContantListView(this.state.contantData)}
        </View>
        {/* </ScrollView>

        </ScrollView> */}
      </View>
    );
  }

  _renderLeftListView = (data) => {
    if (this.props.tableType == 'day') {
      numOfLine = 15;
    }else {
      numOfLine = 14;
    }
    return (
      <LeftListView
        itemStyle={[this.props.itemStyle,this.props.leftItemStyle,{height:((this.props.style.height-bottom_space)/numOfLine)}]}
        textStyle={[this.props.textStyle]}
        style={[styles.leftListView,{width:this.props.leftItemStyle.width ,height:this.props.style.height,backgroundColor:'white'}]}
        data={data}
      />)
  }
  _renderContantListView = (data) => {

    if (this.props.tableType == 'day') {
      numOfLine = 15;
    }else {
      numOfLine = 14;
    }
    var data = this.props.data;
    return (
      <ContentTableList
        itemStyle={[this.props.itemStyle,{height:((this.props.style.height-bottom_space)/numOfLine)}]}
        textStyle={[this.props.textStyle]}
        style={[styles.contentTableList,{width:data.length<=2?(data.length*this.props.itemStyle.width):(this.props.style.width-this.props.leftItemStyle.width),height:this.props.style.height, backgroundColor:'white'}]}
        keys={keys}
        data = {data}
      />)
  }
}

const styles = StyleSheet.create({
  sContainer: {
    // width:width,
    flexDirection:'row',
    justifyContent:'center',
    alignItems: 'center',
  },
  leftListView:{
    width:80,
    height:height,
  },
  contentTableList:{
    width:width-80,
    height:height,
  },
});
